import React from 'react'
 
import { Button, Icon, Spin, Alert } from 'antd';
import fetchJSON from 'fetch-jsonp'

export default class MovieDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      info: {}, //电影详细信息对象
      isLoading: true
    }
  }

  componentWillMount(){
    fetchJSON(`https://api.douban.com/v2/movie/subject/${this.props.match.params.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`).then(res => res.json()).then((data) => {
      this.setState({
        info: data,
        isLoading: false
      })
    })
  }
  render(){
    return <div>
      <Button type="primary" onClick={this.goBack}>
        <Icon type="left" />
        返回列表
      </Button>
      {this.renderInfo()}
    </div>
  }

  renderInfo = () => {
    if(this.state.isLoading){
      return <Spin tip="Loading...">
      <Alert
        message="正在请求电影数据"
        description="精彩内容即将呈现"
        type="info"
      />
    </Spin>
    }else{
      return <div>
        <div style={{textAlign:"center"}}>
          <h1>{this.state.info.title}</h1>
          <img src={this.state.info.images.large} alt=""/>
        </div>
        <p style={{textIndent: "2em",lineHeight:"30px"}}>{this.state.info.summary}</p>
      </div>
    }
  }

  // 实现返回列表的功能
  goBack = () => {
    this.props.history.go(-1)
  }
  
}